<template>
  <div class="footer">
    <div class="menus">
      <div
        class="item"
        @click="chose(index)"
        v-for="(item, index) in tabs"
        :key="index"
      >
        <div class="icon">
          <svg
            v-show="chosed === index"
            t="1606980391239"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3812"
            width="32"
            height="32"
          >
            <path
              d="M562.805 80.6975a72.135 72.135 0 0 0-96.93 0L73.925 452.87a36.1575 36.1575 0 0 0 48.42 53.7075l6.2325-5.9175V889.1a72.315 72.315 0 0 0 72.315 72.405h210.4425v-217.71a50.9175 50.9175 0 0 1 50.94-50.985h99.0225a50.9175 50.9175 0 0 1 50.94 50.985v217.71h215.4375a72.315 72.315 0 0 0 72.3375-72.405V505.4075c16.065 14.535 38.8575 13.4325 52.2225-1.4625a36.1575 36.1575 0 0 0-2.61-51.075L562.805 80.72z"
              fill="#0075c1"
              p-id="3813"
            ></path>
          </svg>
          <svg
            v-show="chosed !== index"
            t="1606980136089"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3539"
            width="32"
            height="32"
          >
            <path
              d="M553.86217486 156.61769104a59.43740844 59.43740844 0 0 0-79.86800372 0L151.037323 463.27823652a29.79286193 29.79286193 0 0 0 39.89685059 44.25361633l5.13542175-4.87586976V822.7208252a59.58572388 59.58572388 0 0 0 59.58572388 59.65988159h173.39942156v-179.38780189a41.95472717 41.95472717 0 0 1 41.9732666-42.01034546h81.59231544a41.95472717 41.95472717 0 0 1 41.9732666 42.01034546v179.38780189h177.51502991a59.58572388 59.58572388 0 0 0 59.6042633-59.6598816V506.56780256c13.2371521 11.97647094 32.01759338 11.06803894 43.03001404-1.20506287a29.79286193 29.79286193 0 0 0-2.15057373-42.08450317L553.86217486 156.63623047Z"
              fill="#cdcdcd"
              p-id="3540"
            ></path>
          </svg>
        </div>
        <div :style="chosed === index ? 'color:blue' : ''" class="title">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Footer extends Vue {
  private chosed: number = 0;
  private tabs = [
    {
      icon:
        "https://kpan.oss-cn-hangzhou.aliyuncs.com/upload/blnuZN1/1605271945152.png",
      title: "首页"
    },
    {
      icon:
        "https://kpan.oss-cn-hangzhou.aliyuncs.com/upload/blnuZN1/1605271945152.png",
      title: "找房"
    },
    {
      icon:
        "https://kpan.oss-cn-hangzhou.aliyuncs.com/upload/blnuZN1/1605271945152.png",
      title: "我的"
    }
  ];
  chose(index: number): void {
    this.chosed = index;
  }
}
</script>

<style lang="scss">
.footer {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0px;
  margin-top: 10px;
  width: 95%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto;
  .menus {
    display: flex;
    justify-content: space-between;
    img {
      width: 20px;
      height: 20px;
    }
    .icon {
      color: blue;
    }
    .title {
      color: rgb(163, 163, 163);
      font-size: 12px;
    }
  }
}
</style>
